<template>
  <section class="chart-container">
    <div class="select_top">
      <span class="w_tip">
        <p>填报频率要求：每月</p>
        <p>本月填报期限 2018-11-20</p>
      </span>
      <el-input v-model="nname" @keyup.native.enter="searchWK" clearable placeholder="请输入类别名称、所属指标电话"
        style="width:29%;margin:10px 12px 0 20px"
      ></el-input>
      <el-select v-model="wStatus" clearable placeholder="本月状态">
        <el-option
          v-for="item in statusoptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-button style="margin-left:10px" @click="searchWK">检索</el-button>
    </div>
    <el-table
      :data="workList"
      style="width: 92%;font-size:13px;margin:35px auto"
    >
      <el-table-column
        type="index"
        width="50"
        label="序号"
      >
      </el-table-column>
      <el-table-column
        prop="hash.pname"
        label="项目名称"
      >
      </el-table-column>
      <el-table-column
        prop="hash.nname"
        label="所属指标"
      >
      </el-table-column>
      <el-table-column
        prop="hash.lbname"
        label="所属类别"
      >
      </el-table-column>
      <el-table-column
        prop="hash.time"
        label="最后更新时间"
      >
      </el-table-column>
      <el-table-column
        prop="name"
        label="本月状态"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.hash.status=== '0'">未更新</span>
          <span v-else-if="scope.row.hash.status=== '1'">已更新</span>
          <span v-else style="color: red">要求重填</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="100"
      >
        <template slot-scope="scope">
          <el-button
            type="danger"
            size="small"
            @click="rewtite(scope.row)"
            v-if="scope.row.hash.status==2"
          >
            重填
          </el-button>
          <el-button
            type="primary"
            size="small"
            @click="checkWork(scope.row)"
            v-else-if="scope.row.hash.status==1"
          >
            查看
          </el-button>
          <el-button
            type="primary"
            size="small"
            @click="changeW(scope.row)"
            v-else
          >
            状态更新
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="handleCurrentChange"
      :currentPage.sync="currentPage3"
      :pageSize="pagesize"
      layout="prev, pager, next, jumper"
      :total="total"
      style="text-align:center"
    >
    </el-pagination>
    <el-dialog
      title="状态更新"
      :visible.sync="showW"
      width="60%"
    >
      <el-form labelWidth="140px">
        <el-form-item label="项目进度">
          <el-select v-model="pgname" placeholder="请选择" style="width:100%" v-validate="'required'"
            name="项目进度"
            @change="changpgvalue"
          >
            <el-option
              v-for="item in statusoptions2"
              :key="item.label"
              :label="item.label"
              :value="item.label"
            >
            </el-option>
          </el-select>
          <div class="el-form-item__error">{{ errors.first('项目进度') }}</div>
        </el-form-item>
        <el-form-item label="进度百分比">
          <el-input v-model="pgvalue" style="width:20%;float:left" v-validate="'required|between:0,10'" name="进度百分比"
            v-if="pgname=='前期工作'"
            type="number" min="0" :max="10"
          ></el-input>
          <el-input v-model="pgvalue" style="width:20%;float:left" v-validate="'required|between:10,90'" name="进度百分比"
            v-else-if="pgname=='整治中'"
            type="number" min="0" :max="90"
          ></el-input>
          <el-input v-model="pgvalue" style="width:20%;float:left" v-validate="'required'" name="进度百分比"
            v-else
            type="number"
            readonly
          ></el-input>%
          <p style="color:#aaa;font-size:13px;line-height:20px;width:70%;float:right">
            注：该项为递增项，只能在原进度百分比基础上增加，不能减少。
            前期工作最高至10%，整治中最高至90%
          </p>
          <div class="el-form-item__error">{{ errors.first('进度百分比') }}</div>
        </el-form-item>
        <el-form-item label="项目备注">
          <el-input
            v-validate="'required'" name="项目备注"
            type="textarea"
            :rows="3"
            placeholder="请输入内容"
            v-model="context"
          >
          </el-input>
          <div class="el-form-item__error">{{ errors.first('项目备注') }}</div>
        </el-form-item>
        <el-form-item label="整治前">
          <el-upload
            action="url"
            :autoUpload="false"
            listType="picture-card"
            :onChange="changeimg1"
            ref="img1"
            :httpRequest="upload1"
            :limit="1"
            :onRemove="removeImg1"
            :onPreview="handlePictureCardPreview1"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible1" appendToBody>
            <img width="100%" :src="dialogImageUrl1" alt="">
          </el-dialog>
        </el-form-item>
        <el-form-item label="整治后">
          <el-upload
            action="url"
            :autoUpload="false"
            listType="picture-card"
            :onChange="changeimg2"
            ref="img2"
            :httpRequest="upload2"
            :limit="1"
            :onRemove="removeImg2"
            :onPreview="handlePictureCardPreview2"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible2" appendToBody>
            <img width="100%" :src="dialogImageUrl2" alt="">
          </el-dialog>
        </el-form-item>
        <el-form-item label="佐证材料">
          <el-upload
            class="upload-demo"
            action="url"
            :fileList="fileList"
            multiple
            :limit="3"
            :autoUpload="false"
            :onChange="changefileList"
            ref="upload"
            :httpRequest="upload3"
            :onRemove="removeImg3"
          >
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showW = false">取 消</el-button>
        <el-button type="primary" @click="changeWstatus">确 定</el-button>
      </span>
    </el-dialog>


    <el-dialog
      title="重填"
      :visible.sync="showW2"
      width="60%"
    >
      <el-form labelWidth="140px">
        <el-form-item label="重填原因">
          <span style="color:red">{{workData.remark}}</span>
        </el-form-item>
        <el-form-item label="项目进度">
          <el-select v-model="workData.pgname" placeholder="请选择" style="width:100%" v-validate="'required'"
            name="项目进度"
          >
            <el-option
              v-for="item in statusoptions2"
              :key="item.label"
              :label="item.label"
              :value="item.label"
            >
            </el-option>
          </el-select>
          <div class="el-form-item__error">{{ errors.first('项目进度') }}</div>
        </el-form-item>
        <el-form-item label="进度百分比">
          <el-input v-model="workData.pgvalue" style="width:20%;float:left" v-validate="'required'" name="进度百分比"></el-input>%
          <p style="color:#aaa;font-size:13px;line-height:20px;width:70%;float:right">
            注：该项为递增项，只能在原进度百分比基础上增加，不能减少。
            前期工作最高至10%，整治中最高至90%
          </p>
          <div class="el-form-item__error">{{ errors.first('进度百分比') }}</div>
        </el-form-item>
        <el-form-item label="项目备注">
          <el-input
            v-validate="'required'" name="项目备注"
            type="textarea"
            :rows="3"
            placeholder="请输入内容"
            v-model="workData.context"
          >
          </el-input>
          <div class="el-form-item__error">{{ errors.first('项目备注') }}</div>
        </el-form-item>
        <el-form-item label="整治前">
          <el-upload
            action="url"
            :autoUpload="false"
            listType="picture-card"
            :onChange="changeimg1"
            :fileList="fileList1"
            ref="img1"
            :httpRequest="upload1"
            :limit="1"
            class="upload-demo"
            :onRemove="removeImg1"
            :onPreview="handlePictureCardPreview1"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible1" appendToBody>
            <img width="100%" :src="dialogImageUrl1" alt="">
          </el-dialog>
        </el-form-item>
        <el-form-item label="整治后">
          <el-upload
            action="url"
            :autoUpload="false"
            listType="picture-card"
            :onChange="changeimg2"
            :fileList="fileList2"
            ref="img2"
            :httpRequest="upload2"
            :limit="1"
            :onRemove="removeImg2"
            :onPreview="handlePictureCardPreview2"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible2" appendToBody>
            <img width="100%" :src="dialogImageUrl2" alt="">
          </el-dialog>
        </el-form-item>
        <el-form-item label="佐证材料">
          <el-upload
            class="upload-demo"
            action="url"
            :fileList="fileList"
            multiple
            :limit="3"
            :autoUpload="false"
            :onChange="changefileList"
            ref="upload"
            :httpRequest="upload3"
            :onRemove="removeImg3"
          >
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showW2 = false">取 消</el-button>
        <el-button type="primary" @click="saveRewrite">重 填</el-button>
      </span>
    </el-dialog>


    <el-dialog
      title="查看"
      :visible.sync="showW3"
      width="60%"
    >
      <el-form labelWidth="140px">
        <el-form-item label="项目进度">
          {{workData2.pgname}}
        </el-form-item>
        <el-form-item label="进度百分比">
          {{workData2.pgvalue}}%
        </el-form-item>
        <el-form-item label="项目备注">
          {{workData2.context}}
        </el-form-item>
        <el-form-item label="整治前">
          <el-upload
            :disabled="true"
            action="url"
            listType="picture-card"
            :fileList="fileList1"
            :onPreview="handlePictureCardPreview1"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible1" appendToBody>
            <img width="100%" :src="dialogImageUrl1" alt="">
          </el-dialog>
        </el-form-item>
        <el-form-item label="整治后">
          <el-upload
            :disabled="true"
            action="url"
            listType="picture-card"
            :fileList="fileList2"
            :onPreview="handlePictureCardPreview2"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible2" appendToBody>
            <img width="100%" :src="dialogImageUrl2" alt="">
          </el-dialog>
        </el-form-item>
        <el-form-item label="佐证材料">
          <el-upload
            :disabled="true"
            class="upload-demo"
            action="url"
            :fileList="fileList"
          >
          </el-upload>
        </el-form-item>
      </el-form>
    </el-dialog>
  </section>
</template>

<script>
export default {
  data() {
    return {
      currentPage3: 1,
      pagesize: 10,
      total: 10,
      fileList1: [{ name: '', url: '' }],
      fileList2: [{ name: '', url: '' }],
      showW: false,
      showW2: false,
      showW3: false,
      workList: [],
      workData: {},
      workData2: {},
      nname: '',
      wStatus: '',
      id: '',
      pgname: '',
      pgvalue: '',
      context: '',
      beforeimage: '',
      laterimage: '',
      oldFileName: [],
      newFileUrl: [],
      dialogImageUrl1: '',
      dialogVisible1: false,
      dialogImageUrl2: '',
      dialogVisible2: false,
      ts: this.newStore(),
      img1: {},
      img2: {},
      fileList: [],
      statusoptions: [{
        value: '0',
        label: '未更新',
      }, {
        value: '1',
        label: '已更新',
      }, {
        value: '2',
        label: '要求重填',
      }],
      statusoptions2: [{
        label: '前期工作',
      }, {
        label: '整治中',
      }, {
        label: '已完成',
      }],
    };
  },
  props: {
    typeName: String,
    required: true,
  },
  created() {
    this.getworkList();
  },
  methods: {
    changpgvalue() {
      if (this.pgname == '已完成') {
        this.pgvalue = '100';
      } else if (this.pgname == '前期工作') {
        this.pgvalue = '0';
      } else {
        this.pgvalue = '10';
      }
    },
    checkWork(item) {
      this.showW3 = true;
      const req = {
        handle: '2E8E7DE13E3E62949CFDA5DB7E2B76806E6C4F647ADC525A5E85279393623265BFF0B9210751F692',
        id: item.hash.id,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.workData2 = ts.d.data.operation1[0].hash;
        this.fileList1[0].url = `http://perform.lo${this.workData2.beforeimage}`;
        this.fileList2[0].url = `http://perform.lo${this.workData2.laterimage}`;
        const a = {};
        this.fileList = [];
        for (let i = 0; i < ts.d.data.operation2.length; i += 1) {
          a.name = ts.d.data.operation2[i].hash.fname;
          a.url = ts.d.data.operation2[i].hash.furl;
          this.fileList.push(a);
        }
      });
    },
    rewtite(item) {
      this.showW2 = true;
      this.id = item.hash.id;
      const req = {
        handle: '2E8E7DE13E3E62949CFDA5DB7E2B76806E6C4F647ADC525A5E85279393623265BFF0B9210751F692',
        id: item.hash.id,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.workData = ts.d.data.operation1[0].hash;
        this.fileList1[0].url = `http://perform.lo${this.workData.beforeimage}`;
        this.fileList2[0].url = `http://perform.lo${this.workData.laterimage}`;
        const a = {};
        this.fileList = [];
        for (let i = 0; i < ts.d.data.operation2.length; i += 1) {
          a.name = ts.d.data.operation2[i].hash.fname;
          a.url = ts.d.data.operation2[i].hash.furl;
          this.fileList.push(a);
        }
      });
    },
    saveRewrite() {
      this.$validator.validateAll().then((result) => {
        if (result) {
          for (let i = 0; i < this.fileList.length; i += 1) {
            this.oldFileName.push(this.fileList[i].name);
            this.newFileUrl.push(this.fileList[i].url);
          }
          const req = {
            handle: '2E8E7DE13E3E62949CFDA5DB7E2B76806E6C4F647ADC525A69D563A69A06496C',
            id: this.id,
            pgname: this.workData.pgname,
            pgvalue: this.workData.pgvalue,
            context: this.workData.context,
            beforeimage: this.beforeimage,
            laterimage: this.laterimage,
            oldFileName: this.oldFileName,
            newFileUrl: this.newFileUrl,
          };
          this.$confirm('确定重填?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }).then(() => {
            this.spost(this.ts, '/mainservlet', req).then(() => {
              this.$message({
                type: 'success',
                message: '重填成功!',
              });
              this.getworkList();
              this.showW2 = false;
            });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消',
            });
          });
        } else {
          this.$message.error('内容不能为空或不符合规则！');
          return false;
        }
      });
    },
    changeWstatus() {
      this.$validator.validateAll().then((result) => {
        if (result) {
          const req = {
            handle: '2E8E7DE13E3E62949CFDA5DB7E2B76806E6C4F647ADC525A69D563A69A06496C',
            id: this.id,
            pgname: this.pgname,
            pgvalue: this.pgvalue,
            context: this.context,
            beforeimage: this.beforeimage,
            laterimage: this.laterimage,
            oldFileName: this.oldFileName,
            newFileUrl: this.newFileUrl,
          };
          this.$confirm('确定提交?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }).then(() => {
            this.spost(this.ts, '/mainservlet', req).then(() => {
              this.$message({
                type: 'success',
                message: '提交成功!',
              });
              this.getworkList();
              this.showW = false;
            });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消',
            });
          });
        } else {
          this.$message.error('内容不能为空或不符合规则！');
          return false;
        }
      });
    },
    handlePictureCardPreview1(file) {
      this.dialogImageUrl1 = file.url;
      this.dialogVisible1 = true;
    },
    handlePictureCardPreview2(file) {
      this.dialogImageUrl2 = file.url;
      this.dialogVisible2 = true;
    },
    removeImg1() {
      this.img1 = {};
    },
    removeImg2() {
      this.img2 = {};
    },
    removeImg3(file) {
      this.fileList.splice(this.fileList.indexOf(file), 1);
    },
    changeimg1(file) {
      file = file.raw;
      const fileType = file.type;
      const fileReader = new FileReader();
      fileReader.readAsDataURL(file);
      fileReader.onload = (event) => {
        const a = event.target.result;
        const sendData = a.replace(`data:${fileType};base64,`, '');
        // this.img1.name = file.name;
        // this.img1.dataUrl = sendData;
        this.img1.name = file.name;
        this.img1.data = sendData;
        this.upload1();
      };
    },
    changeimg2(file) {
      file = file.raw;
      const fileType = file.type;
      const fileReader = new FileReader();
      fileReader.readAsDataURL(file);
      fileReader.onload = (event) => {
        const a = event.target.result;
        const sendData = a.replace(`data:${fileType};base64,`, '');
        // this.img1.name = file.name;
        // this.img1.dataUrl = sendData;
        this.img2.name = file.name;
        this.img2.data = sendData;
        this.upload2();
      };
    },
    changefileList(file) {
      const flieData = {};
      file = file.raw;
      const fileType = file.type;
      const fileReader = new FileReader();
      fileReader.readAsDataURL(file);
      fileReader.onload = (event) => {
        const a = event.target.result;
        const sendData = a.replace(`data:${fileType};base64,`, '');
        flieData.name = file.name;
        flieData.data = sendData;
        this.fileList.push(flieData);
        this.upload3();
      };
    },
    upload1() {
      const req = {
        oriFileName: this.img1.name,
        value: this.img1.data,
      };
      this.spost(this.ts, '/upload2.jsp', req).then((ts) => {
        this.beforeimage = ts.d.newFileUrl;
      });
    },
    upload2() {
      const req = {
        oriFileName: this.img2.name,
        value: this.img2.data,
      };
      this.spost(this.ts, '/upload2.jsp', req).then((ts) => {
        this.laterimage = ts.d.newFileUrl;
      });
    },
    upload3() {
      for (let i = 0; i < this.fileList.length; i += 1) {
        const req = {};
        req.oriFileName = this.fileList[i].name;
        req.value = this.fileList[i].data;
        this.spost(this.ts, '/upload2.jsp', req).then((ts) => {
          this.oldFileName.push(ts.d.oldFileName);
          this.newFileUrl.push(ts.d.newFileUrl);
        });
      }
    },

    changeW(item) {
      this.showW = true;
      this.id = item.hash.id;
    },
    handleCurrentChange(val) {
      this.getworkList();
    },
    getworkList() {
      const req = {
        handle: '2E8E7DE13E3E62949CFDA5DB7E2B7680150753AE8E0AA8BC3D45104396E0957BF6486B1D96ED9F7E',
        nname: '',
        pgname: this.typeName,
        start: (this.currentPage3 - 1) * this.pagesize,
        limit:this.pagesize,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.workList = ts.d.data.operation1;
        this.total = parseInt(ts.d.data.operation2[0].hash.allrs);
      });
    },
    searchWK() {
      const req = {
        handle: '2E8E7DE13E3E62949CFDA5DB7E2B7680150753AE8E0AA8BC3D45104396E0957BF6486B1D96ED9F7E',
        nname: this.nname,
        status: this.wStatus,
        pgname: '前期工作',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.workList = ts.d.data.operation1;
      });
    },
  },

};
</script>

<style lang="stylus">
.el-upload--picture-card
  height 100px
  width 100px
  line-height 100px
.el-upload-list--picture-card .el-upload-list__item
  height 100px
  width 100px
.w_tip
  width 200px
  line-height 27px
  float left
.el-input--suffix .el-input__inner
  font-size 13px
.el-button
  font-size 13px
.line
  border-bottom 1px solid #ccc
  font-size 18px
  text-align center
  margin 20px 0
  padding-bottom 5px
  color black
.select_top
  width 92%
  margin 20px auto
.el-col
  padding: 20px 10px;
.chart-container
  min-height 100vh
  background #f1f1f1
  width: 100%;
  float: left;
</style>

